<template>
<div class="content">
  <head title="My orders"></head>
  <!-- <div class="navbar">
    <text
      v-for="(item, index) in navList"
      :key="index"
      class="nav-item"
      :ref="'item'+index"
      @click="tabClick(index)"
      :class="[tabCurrentIndex == index?'current':'']"
    >{{ item.text }}</text>
  </div>-->
  <slider class="slider" @change="slideChange" :index="tabCurrentIndex">
    <scroller class="listScroll" v-for="(item, index) in navList" :key="index">
      <div
        v-if="item.orderList.length>0"
        v-for="(list, index2) in item.orderList"
        :key="index2"
        class="listItem"
      >
        <div
          class="titList"
          @click="e=>goUrl('root:app/user/order_list/order_details.js',{id:list.id})"
        >
          <image
            class="imgList"
            v-for="(imageu,indexc) in list.list"
            :key="indexc"
            :src="imageu.thumb"
          />
        </div>
        <div class="bottomList">
          <text class="num">{{list.number}} item</text>
          <text class="total">Total</text>
          <text class="symbol">AU$</text>
          <text class="money">{{list.pay_price}}</text>
          <text
            class="pickTime"
            @click="show=true;co_order_id=list.id"
          >{{list.pick_up_time?list.pick_up_time:list.delivery_time?list.delivery_time:'Pick-up time'}}</text>
        </div>
        <!-- type=1 2 	未支付 -->
      </div>
      <empty v-if="item.orderList.length==0" tips="Your order is empty"></empty>
    </scroller>
  </slider>
  <WxcPopup
    :height="600"
    pos="bottom"
    ref="wxcpopup"
    :show="show"
    @wxcPopupOverlayClicked="show=false"
  >
    <div style="flex:1">
      <div class="popTop">
        <text class="popTopTxt" @click="show=false">Cancel</text>
        <text class="popTopTxt" @click="onOK">Confirm</text>
      </div>
      <div class="pickBox">
        <div class="dayBox">
          <text
            class="daytxt"
            :class="[index==selectId?'activetxt':'']"
            v-for="(item,index) in seasons"
            @click="selectId=index"
            :key="index"
          >{{item.label}}</text>
        </div>
        <div class="timeBox">
          <div
            class="timeTxt"
            @click="item.status==0?deliveryTime=item.value:null"
            v-for="(item,index) in seasons[selectId].children"
            :key="index"
          >
            <text
              :class="[deliveryTime==item.value?'activeTime':'']"
              class="leftTime"
            >{{item.label}}</text>
            <text
              :class="[deliveryTime==item.value?'activeStatus':'']"
              class="rightStatus"
            >{{item.status==0?'Available':'Full'}}</text>
          </div>
        </div>
      </div>
    </div>
  </WxcPopup>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template>

<script>
import {
  get_order_all_list,
  del_order_co,
  order_edit_time,
  getControl
} from "../../../mixin/ajax.js";
import asCore from "../../../mixin/core";
import { AmPicker, AmList, AmListItem } from "weex-amui";
import { WxcPopup } from "weex-ui";
export default {
  components: { WxcPopup, AmPicker, AmList, AmListItem },
  data() {
    return {
      show: false,
      tabCurrentIndex: 0,
      deliveryTime: "",
      page: 1,
      selectId: 0,
      userId: "",
      co_order_id: "",
      seasons: [],
      value: [],
      navList: [
        // {
        //   hasMore: true,
        //   state: 0,
        //   text: "sold",
        //   page: 1,
        //   loadingType: "more",
        //   total: 0,
        //   orderList: []
        // },
        {
          hasMore: true,
          state: 1,
          page: 1,
          text: "bought",
          loadingType: "more",
          total: 0,
          orderList: []
        }
      ]
    };
  },
  created() {
    // this.get7Days();

    asCore.getBsessionid(userId => {
      this.userId = userId;
      this.getOrderList();
    });

    getControl({}, (res, flag) => {
      if (flag) {
        if (res.code == 200) {
          this.get7Days(res.data);
        }
      }
    });
  },
  methods: {
    get7Days(data) {
      //获取系统当前时间
      var now = new Date();
      var nowTime = now.getTime();
      var oneDayTime = 24 * 60 * 60 * 1000;
      let dayArray = [];
      for (var i = 1; i < 4; i++) {
        //显示周一
        var ShowTime = nowTime + i * oneDayTime;
        //                    var ShowTime = nowTime + (i+1)*oneDayTime ;
        //初始化日期时间
        var myDate = new Date(ShowTime);
        var year = myDate.getFullYear();
        var month = myDate.getMonth() + 1;
        var date = myDate.getDate();
        month = month > 10 ? month : "0" + month;
        date = date > 10 ? date : "0" + date;
        let labelVal = date + "/" + month + "/" + year;
        let labelVals = date + "/" + month;
        let childrenList = [
          {
            label: "2PM - 5PM",
            status: data["data" + i].Morning.status,
            value: labelVal + "," + "2PM - 5PM"
          },
          {
            label: "6PM - 9PM",
            status: data["data" + i].Afternoon.status,
            value: labelVal + "," + "6PM - 9PM"
          }
        ];
        if (i == 0) {
          var hours = new Date().getTime();

          var startTime = new Date(
            year + "/" + month + "/" + date + " " + "12:10"
          ).getTime();
          var overtime = new Date(
            year + "/" + month + "/" + date + " " + "16:10"
          ).getTime();
          if (hours > startTime) {
            childrenList = [
              {
                label: "6PM - 9PM",
                status: data["data" + i].Afternoon.status,
                value: labelVal + "," + "6PM - 9PM"
              }
            ];
          }

          if (hours > overtime) {
            continue;
          }
        }
        dayArray.push({
          label: labelVals,
          value: labelVal,
          children: childrenList
        });
      }
      // this.log(dayArray);
      this.seasons = dayArray;
    },
    TimeRange(startTime) {
      var startTimes = startTime ? startTime : 8; //日期添加时分秒 开始日期
      var endTimes = 24; //日期添加时分秒 结束日期
      var timeAll = (endTimes - startTimes) / 2;
      let timeArry = [];
      for (let i = 0; i < timeAll; i++) {
        let time1 = startTimes + ":00";
        let time2 = startTimes + 2 + ":00";
        let value = time1 + "-" + time2;
        timeArry.push({ label: value, value: value });
        startTimes = startTimes + 2;
      }
      return timeArry;
    },
    onOK() {
      let delivery_time = this.deliveryTime;
      this.show = false;
      order_edit_time(
        {
          users_id: this.userId,
          co_order_id: this.co_order_id,
          delivery_time: this.tabCurrentIndex == 1 ? delivery_time : "",
          pick_up_time: this.tabCurrentIndex == 1 ? "" : delivery_time
        },
        (res, flag) => {
          if (flag) {
            if (res.code == 200) {
              this.getOrderList("fresh");
            }
          }
        }
      );
    },
    onHide(type) {},
    cancelOrder(item, index) {
      this.isLoading = true;
      del_order_co(
        { users_id: this.userId, co_order_id: item.id },
        (res, flag) => {
          this.isLoading = false;
          if (flag) {
            if (res.code == 200) {
              this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
            }
          }
        }
      );
    },
    getOrderList(source) {
      let index = this.tabCurrentIndex;
      let navItem = this.navList[index];
      if (source === "tabChange" && navItem.loaded === true) {
        //tab切换只有第一次需要加载数据
        return;
      }
      if (source == "fresh") {
        navItem.page = 1;
        navItem.hasMore = true;
      }
      if (navItem.loadingType === "loading" || !navItem.hasMore) {
        //防止重复加载
        return;
      }
      navItem.loadingType = "loading";
      this.isLoading = true;
      get_order_all_list(
        {
          users_id: this.userId,
          type: this.tabCurrentIndex,
          page: navItem.page
        },
        (res, flag) => {
          this.isLoading = false;
          if (flag) {
            if (navItem.page == 1) {
              navItem.orderList = res.data.list;
            } else {
              navItem.orderList = navItem.orderList.concat(res.data.list);
            }
            navItem.page++;
            this.$set(navItem, "total", res.data.total);
            this.$set(navItem, "loaded", true);
            if (navItem.orderList.length == res.data.total) {
              this.$set(navItem, "hasMore", false);
            }
            navItem.loadingType = "more";
          }
        }
      );
    },
    goDelivery() {
      this.push("root:app/user/order_list/delivery.js", {
        name: "ssss"
      });
    },

    refund() {
      this.push("root:app/user/order_list/refund.js", {
        name: "ssss"
      });
    },
    goUrl(url, parmar) {
      this.push(url, parmar);
    },

    tabClick(index) {
      if (this.tabCurrentIndex == index) {
        return false;
      }
      this.tabCurrentIndex = index;
      this.getOrderList("tabChange");
    },
    slideChange(index) {
      if (this.tabCurrentIndex == index.index) {
        return false;
      }
      this.tabCurrentIndex = index.index;
      this.getOrderList("tabChange");
      const ref = this.$refs["item" + index.index];
      const el = ref ? ref[0] : null;
      const dom = weex.requireModule("dom");

      dom.scrollToElement(el, {
        offset: -250
      });
    }
  }
};
</script>

<style scoped>
.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicator {
  height: 40px;
  width: 40px;
}
.content {
  background-color: #f5f5f5;
  flex: 1;
}

.navbar {
  height: 90px;
  width: 750px;
  flex-direction: row;
  justify-content: center;
}

.popTop {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.popTopTxt {
  display: flex;
  font-size: 30px;
  line-height: 30px;
  padding: 30px 30px;
  font-weight: 500;
}
.pickBox {
  background-color: #f2f2f2;
  flex-direction: row;
  flex: 1;
}
.dayBox {
  flex: 2;
  align-items: center;
  justify-content: center;
}
.daytxt {
  font-size: 34px;
  line-height: 58px;
  margin: 20px 0;
}
.activetxt {
  font-weight: 600;
  font-size: 65px;
}
.timeBox {
  flex: 3;
  align-items: center;
  justify-content: center;
}
.timeTxt {
  flex-direction: row;
  align-items: center;
  margin: 20px 0;
}

.activeTime {
  border-color: #1e1e1e;
  border-width: 5px;
  font-weight: 600;
}
.leftTime {
  border-width: 2px;
  border-color: #ccc;
  border-style: solid;
  padding: 30px 20px;
  font-size: 40px;
}
.rightStatus {
  font-size: 28px;
  margin-left: 20px;
}
.nav-item {
  height: 90px;
  padding: 0 20px;
  margin: 0 60px;
  line-height: 90px;

  font-size: 30px;
  color: #333333;
}

.current {
  border-bottom-color: #ba8833;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  color: #ba8833;
}

.slider {
  flex: 1;
  width: 750px;
  position: relative;
}

.listScroll {
  flex: 1;
  width: 750px;
  background-color: #f5f5f5;
}

.listItem {
  margin-top: 20px;
  background-color: #ffffff;

  width: 700px;
  border-radius: 4px;
  margin-left: 25px;
}

.titList {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
}
.titList:active {
  background-color: #f2f2f2;
}

.titLeft {
  flex-direction: row;
  align-items: center;
}

.imgList {
  width: 120px;
  height: 120px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.titname {
  font-size: 28px;
  color: #333;
  margin-right: 20px;
}

.iconfont {
  font-family: iconfont;
}

.titIcon {
  font-size: 24px;
  color: #999999;
}

.imgIcon {
  font-size: 32px;
  color: #999999;
}

.status {
  font-size: 28px;
  color: #ec414d;
}

.bottomList {
  flex-direction: row;
  align-items: center;
  padding: 30px 32px;
  border-top-color: #e6e6e6;
  border-top-style: solid;
  border-top-width: 1px;
}
.pickTime {
  flex: 1;
  text-align: right;
  font-size: 22px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(186, 136, 51, 1);
}
.num {
  margin-right: 40px;
  font-size: 22px;
  color: #8e8e93;
}

.total {
  font-size: 22px;
  color: #8e8e93;
}

.symbol {
  font-size: 22px;
  color: #ec414d;
  margin: 0 10px;
}

.money {
  font-size: 22px;
  color: #ec414d;
}

.actionBox {
  flex-direction: row;
  justify-content: flex-end;
  padding-top: 20px;
}

.actionItem {
  font-size: 28px;
  color: #333333;
  padding: 5px 10px;
  line-height: 40px;
  border-width: 1px;
  border-style: solid;
  border-color: #333333;
  margin-left: 10px;
}

.actionItem:active {
  border-color: #cccccc;
  background-color: #cccccc;
}
</style>
